<template>
  <!--elementplus轮播图-->
  <el-carousel style="width:50%" :interval="1000" trigger="click">
    <el-carousel-item v-for="item in imagesList" :key="item.id" v-show="imagesList.length>0">
      <img :src="item.imgUrl"/>
    </el-carousel-item>
  </el-carousel>

  <!--swipper轮播图-->
  <div class="center">
    <div class="swiper-container" ref="swiper">
      <div class="swiper-wrapper">
        <div class="swiper-slide" v-for="img in imagesList" :key="img.id">
          <img :src="img.imgUrl"/>
        </div>
      </div>
      <!-- 如果需要分页器 -->
      <div class="swiper-pagination"></div>
      <!-- 如果需要导航按钮 -->
      <div class="swiper-button-prev"></div>
      <div class="swiper-button-next"></div>
    </div>
  </div>

</template>

<script>
import {reqBannerList} from "../../api";
import Swiper from "swiper";

export default {
  name: "Carouselbaseelementplus",
  data: () => ({
    imagesList: []
  }),
  mounted() {
    this.getImages()
  },
  methods: {
    // 获取轮播图图片
    async getImages() {
      let result = await reqBannerList();
      if (result.code = 200) {
        this.imagesList = result.data
      }
    },
  },
  watch: {
    //监听bannerList数据
    imagesList: {
      handler() {
        this.$nextTick(() => {
          new Swiper(this.$refs.swiper, {
            loop: true,
            // 切换效果
            effect: 'fade',
            pagination: {
              el: ".swiper-pagination",
              clickable: true
            },
            navigation: {
              nextEl: ".swiper-button-next",
              prevEl: ".swiper-button-prev"
            },
            autoplay: {
              delay: 2000, //2秒切换一次
              disableOnInteraction: false,//用户操作swiper之后，是否禁止autoplay。默认为true：停止。
            },
          })
        })
      }
    },
  }
}
</script>

<style scoped>
/*指示器块的位置*/
/deep/ .el-carousel__indicators {
  /*unset，表示重置*/
  left: unset;
  transform: unset;
  right: 5%;
}

/*指示器按钮的样式*/
/deep/ .el-carousel__button {
  width: 20px;
  height: 20px;
  border: none;
  border-radius: 50%;
  background-color: white;
}

/*指示器激活按钮的样式*/
/deep/ .is-active .el-carousel__button {
  background: #3f8ec8;
}

.center {
  height: 300px;
  width: 500px;
  background-color: #42b983;
}
</style>